<!DOCTYPE html>
<html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		@import url(./../lib/Cesium/Widgets/widgets.css);

		body,
		html,
		#map {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
	</style>

	<script src="./../lib/Cesium/Cesium.js"></script>
	<title>canvas billboard </title>
</head>

<body onload="onload()">
	<div id="map"></div>
	<img id="banner" src="./../img/cesium/c1_1.png" />
</body>

</html>
<script type="text/javascript">

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NTFhMDMwMi02YWVjLTRmNmItOThjNS00MDI1YTVkNjdhODciLCJpZCI6NTY0Miwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzgyNzA5MH0.4OIh4gPgWSceyKB4iHliAX59933ryNrXBwVut46WE78'
 //参考：https://blog.csdn.net/supermapsupport/article/details/103694193
	function onload() { 
		const viewer = new Cesium.Viewer("map", {
			animation: false, //是否创建动画小器件，左下角仪表
			baseLayerPicker: false, //是否显示图层选择器
			fullscreenButton: false, //是否显示全屏按钮
			geocoder: false, //是否显示geocoder小器件，右上角查询按钮
			homeButton: false, //是否显示Home按钮
			infoBox: false, //是否显示信息框
			sceneModePicker: false, //是否显示3D/2D选择器
			selectionIndicator: false, //是否显示选取指示器组件
			timeline: false, //是否显示时间轴
			sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
			navigationHelpButton: false, //是否显示右上角的帮助按钮
			scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
			navigationInstructionsInitiallyVisible: false,
			showRenderLoopErrors: false
		})
		viewer.scene.globe.depthTestAgainstTerrain = false;
		//去除版权信息
		viewer._cesiumWidget._creditContainer.style.display = 'none';


		function createCavans(option) {
			let canvas = document.createElement('canvas'),
				ctx = canvas.getContext('2d');
			ctx.fillStyle = option.fillColor || '#ccccff';
			ctx.font = option.fontSize + "px Arial";
			let imgw = option.img.width, imgh = option.img.height;
			ctx.width = imgw;
			ctx.height = imgh;
			//绘制图片
			ctx.drawImage(option.img, 0, 0, imgw, imgh);

			ctx.fillStyle = option.fillColor || '#ccccff'
			ctx.font = option.fontSize + "px Calibri,sans-serif"
			ctx.shadowOffsetX = 1;
			ctx.shadowBlur = 1;
			//绘制文本
			ctx.fillText(option.text, option.txtOffsetX, option.txtOffsetY);
			return canvas;
		}
		function addBillBoard(text, lnglat) {
			let img = document.getElementById('banner');
			img.width = 236;
			img.height = 105;
			let imgCanvas = createCavans({
				img,
				text,
				fontSize: 35,
				txtOffsetX: 60,
				txtOffsetY: 60,
				fillColor: "#000"
			})
			var entity = viewer.entities.add({
				position: Cesium.Cartesian3.fromDegrees(...lnglat),
				billboard: {
					image: imgCanvas,
					scaleByDistance: new Cesium.NearFarScalar(1000, 1, 100000, 0.1),//设置随图缩放距离和比例
					distanceDisplayCondition: new Cesium.DistanceDisplayCondition(50, 100000)//设置可见距离
				}
			});
			return entity
		}

		let cdE = addBillBoard("成都", [104.058182, 30.673637, 50])
		// addBillBoard("绵阳",[104.741722,31.46402,50])
		// addBillBoard("广元",[105.829757,32.433668,50])
		viewer.flyTo(cdE)
	}

</script>